<template>
	<view class="page">
		<view class="top">
			<image src="../../static/2.png" class="img"></image>
			<view class="name">UI设计师</view>
			<view class="flexRow flexitem">
				<view class="b1">本科</view>
				<view class="b2">|</view>
				<view class="b1">本科</view>
				<view class="b2">|</view>
				<view class="b1">本科</view>
				<view class="b2"></view>
			</view>
			<view class="det">高级的前端工程师操作中开展科技佛山市，高级的前端工程师操作中开展科技佛山市高级的前端工程师操作中开展科技佛山市，高级的前端工程师操作中开展科技佛山市</view>
		</view>
		
			<view class="back flexColumn">
				<view class="backa">
					<view class="yixiang">求职意向-月内到岗</view>
					<view class="s1">UI设计师|16K-18K海州全职</view>
					<view class="s1">联系方式：133****9999</view>
					<view class="s1">联系邮箱：1448898899@qq.com</view>
				</view>
				<view class="lines"></view>
				<view class="backb">
					<text class="yixiang">工作经历</text>
					<view class="example-body">
						<uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" />
					</view>
				</view>
				
				<view class="lines"></view>
				
				<view class="backb">
					<text class="yixiang">教育经历</text>
					<view class="example-body">
						<uni-steps :options="list1" active-color="#007AFF" :active="active" direction="column" />
					</view>
				</view>
			</view>
			
			<view class="bottom flexRow">
				<view class="flexColumn imgList">
					<image src="../../static/7.png" class="img"></image>
					<text class="s1">不合适</text>
				</view>
				<view class="btn1">打电话</view>
				<view  class="btn2">发面邀</view>
			</view>
	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	import uniSection from '@/components/uni-section/uni-section.vue'
	
	export default {
		components: {
			uniSection,
			uniSteps
		},
		data() {
			return {
				active: 10,
				list1:[{
					date:"2019-12-12" ,
					name: '江苏省网络科技有限公司' ,
					title : "UI设计师" ,
					monkey : "120000/月",
					det : [
						{
							name:'负责移动端穿品设计'
						},
						{
							name:'负责移动端穿品设计'
						},
						{
							name:'参与公司款回家设计发现文艺解决问题'
						},
						{
							name:'参与公司款回家设计发现文艺解决问题'
						}
					]
				}],
				
				list2: [{
					date:"2019-12-12" ,
					name: '江苏省网络科技有限公司' ,
					title : "UI设计师" ,
					monkey : "120000/月",
					det : [
						{
							name:'负责移动端穿品设计'
						},
						{
							name:'负责移动端穿品设计'
						},
						{
							name:'参与公司款回家设计发现文艺解决问题'
						},
						{
							name:'参与公司款回家设计发现文艺解决问题'
						}
					]
				},
				{
					date:"2019-12-12" ,
					name: '江苏省网络科技有限公司' ,
					title : "UI设计师" ,
					monkey : "120000/月",
					det : [
						{
							name:'负责移动端穿品设计'
						},
						{
							name:'负责移动端穿品设计'
						},
						{
							name:'参与公司款回家设计发现文艺解决问题'
						},
						{
							name:'参与公司款回家设计发现文艺解决问题'
						}
					]
				}]
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang='scss'>
	page{
		background-image: url("http://img.haoyouduoapp.com/1597303234637.png");
		background-size: 100%;
	}
	
	.page{
		height: 2680rpx;
	}
	
	.back{
		width: 92%;
		margin-left: 4%;
		background: $uni-bg-color;
		margin-top: 400rpx;
		height: 1600rpx;
		border-radius: 20rpx;
		font-size: $uni-font-size-big ;
		
		.lines{
			width: 100%;
			height:20rpx;
			background: #f5f5f5;
			margin-top: 20rpx;
		}
		
		.backa{
			padding: 5%;
			width: 90%;
			
			.yixiang{
				margin-top: 20rpx;
				font-size: $uni-font-size-lg;
				font-weight: 650;
			}
			.s1{
				margin-top: 10rpx;
			}
		}
		.backb{
			padding: 5%;
			width: 90%;
			
			.yixiang{
				margin-top: 20rpx;
				font-size: $uni-font-size-lg;
				font-weight: 650;
			}
		}
		
	}
	
	.top{
		color: $uni-text-color-inverse;
		width: 100%;
		align-items: center;
		display: flex;
		flex-direction: column;
		
		.img{
			width: 140rpx;
			height: 140rpx;
			border-radius: 140rpx;
			margin-top: 70rpx;
		}
		.name{
			font-size: $uni-font-size-lg;
			margin-top: 30rpx;
		}
		.flexitem{
			justify-content: center;
			height: 80rpx;
			align-items: center;
			font-size: $uni-font-size-base;
			
			.b1{
				margin-left: 10rpx;
			}
			.b2{
				margin-left: 10rpx;
			}
		}
		.det{
			width: 80%;
			text-align: center;
			font-size: $uni-font-size-base;
			margin-top: 10rpx;
		}
	}
	
	.bottom{
		width: 100%;
		font-size: $uni-font-size-base;
		height: 150rpx;
		align-items: center;
		margin-top: 10rpx;
		
		
		.imgList{
		}
		.s1{
			color: #fff;
			margin-left: 20rpx;
		}
		
		.img{
			width: 54rpx;
			height: 54rpx;
			margin-left: 40rpx;
		}
		
		.btn1{
			padding: 20rpx 40rpx;
			color: $uni-text-color-inverse;
			background: #FF7904;
			width: 200rpx;
			text-align: center;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 5rpx;
			margin-left: 50rpx;
		}
		
		.btn2{
			padding: 20rpx 40rpx;
			color: $uni-bg-color-main;
			background: #fff;
			width: 200rpx;
			text-align: center;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 5rpx;
			margin-left: 20rpx;
		}
	}
</style>
